
<template>
  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>平台统计</el-breadcrumb-item>
        <el-breadcrumb-item>充值记录</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row style="padding: 15px">
      <el-row class="main">
        <el-row :gutter="10" style="min-height: 40px">
          <el-col :span="24" style="margin-bottom: 5px" align="left">
            <div style="width: 300px;display: flex;flex-direction:column;background-color: #f2f9ff;padding: 10px;border-radius: 10px">
              <el-date-picker
                v-model="dateValue"
                style="width:250px;margin: 0 auto"
                type="daterange"
                @change="getstart()"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
              <span style="font-size: 12px;color: #606266;margin: 10px 0 0 30px">总金额</span>
              <p style="text-align: center;font-size: 20px;color: #303332">￥{{sumValue}}</p>
            </div>
          </el-col>
        </el-row>
        <!--表格-->
        <el-table
          border
          align="left"
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="ordernum"
            label="订单号">
          </el-table-column>
          <el-table-column
            prop="nickname"
            label="用户昵称">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="用户手机">
          </el-table-column>
          <el-table-column
            prop="price"
            label="充值金额">
          </el-table-column>
          <el-table-column
            label="支付时间">
            <template slot-scope="scope">
              {{ toDate(scope.row.pay_time) }}
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-row style="margin-top: 20px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" align="right">
            <el-pagination
              style="text-align: right"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataTotal">
            </el-pagination>
          </el-col>
        </el-row>
      </el-row>
    </el-row>
  </div>
</template>

<script>
  import MyEchartLeft from '../../components/MyEchartLeft'

  export default {
    name: "StatisticsCharge",
    components:{
      MyEchartLeft
    },
    activated() {
      if (!this.$store.state.login.in) {
        this.$router.push({name: "login", params: {userId: 123}})
      }
      this.getstart()
    },
    data() {
      return {
        tableData: [],
        pageSize: 10,
        currentPage: 1,
        dataTotal: 0,
        dateValue:'',
        sumValue:0
      }
    },
    computed: {
      startTime(){
        return this.dateValue?~~(this.dateValue[0]/1000):''
      },
      overTime(){
        return this.dateValue?~~(this.dateValue[1]/1000):''
      }
    },
    methods: {
      //绑定表格数据，分页
      getstart() {
        let thi = this
        const prams = {
          page: thi.currentPage, /*当前页码*/
          pageSize: thi.pageSize, /*每页显示多少条数据*/
          start_time:thi.startTime,
          over_time:thi.overTime
        }
        thi.mySelectAll('statisticsDetails',prams).then(function (value) {
          thi.tableData = value.data.list
          thi.sumValue=value.data.sum
          thi.dataTotal = value.Total
        })
      },
      //选择展示数量
      handleSizeChange(val) {
        this.pageSize = val
        this.getstart()
      },
      //分页
      handleCurrentChange(val) {
        this.currentPage = val
        this.getstart()
      },
    }
  }

</script>

<style scoped>
  .main {
    background-color: white;
    min-height: 500px;
    padding: 10px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
</style>

